<template>
  <div>
    <table-ext :columns="columns" :searchForm="searchForm" :config="config" ref="tableExt">
    </table-ext>
    <div>
      <el-dialog :model="form2" title="供应商信息" :visible.sync="dialogFormVisible">
        <!-- <el-row>
          <el-col :span="3"><el-input value="物料编码：" :disabled="true"></el-input></el-col>
          <el-col :span="9"><el-input v-model="form2.materialCode" :disabled="true"></el-input></el-col>
          <el-col :span="3"><el-input value="物料名称：" :disabled="true"></el-input></el-col>
          <el-col :span="9"><el-input v-model="form2.materialName" :disabled="true"></el-input></el-col>
        </el-row> -->
        <el-row>
          <el-col :span="3" class="col-label">物料编码:</el-col>
          <el-col :span="8" class="col-view">{{form2.materialCode}}</el-col>
          <el-col :span="3" class="col-label">物料名称：</el-col>
          <el-col :span="10" class="col-view">{{form2.materialName}}</el-col>
        </el-row>
        <el-table :data="tableData2" style="width: 100%" max-height="250" :default-sort="{prop: 'materialCode', order: 'descending'}">
          <el-table-column prop="id" v-if="false"></el-table-column>
          <el-table-column prop="materialCode" v-if="false"></el-table-column>
          <el-table-column prop="materialId" v-if="false"></el-table-column>
          <el-table-column prop="vendorCode" label="供应商编码" width="150"></el-table-column>
          <el-table-column prop="vendorErpCode" label="供应商ERP编号" width="250"></el-table-column>
          <el-table-column prop="vendorName" label="供应商名称" width="250"></el-table-column>
          <el-table-column prop="exemptionFlag" label="是否免检" width="150"></el-table-column>
          <el-table-column prop="stockFeedbackStatus" label="是否反馈库存" width="150"></el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import TableExt from '@/components/common/table-ext/table-ext.vue';
  import TableIcon from '@/components/common/table-ext/table-icon';
   export default {
    // 引入自定义表格组件
    components:{
      'table-ext': TableExt
    },
    data() {
      return {
        tableData2: [],
        form2: {
          pageSize: 15,
          pageNo:1
        },
        total2:0,
        materialId: this.$route.query.factoryId,
        // 弹框显示控制
        dialogFormVisible: false,
        // 新增|修改弹框控制
        dialogUpdate: false,
        config:{ // 页面共通配置
          title: '工厂对应的物料信息', //页面标题
          isPage: true, //是否分页
          isNo: true, //是否显示序号
          selection: true, //是否显示复选框
          crudMapping:{ // CRUD方法
            query:{
               url: this.lib.config.host.masterData + "/mdata/material/getMaterirlByFacId/" + this.$route.query.factoryId
            }
          }
        },
        // 查询表单配置
        searchForm:[{
          //显示标签
          label: '物料编码', 
          //数据字段
          key: 'materialCode', 
          //标签类型
          type: 'input' 
        },{
          label: '物料名称',
          key: 'materialName',
          type: 'input'
        }],
        // 表格列定义
        columns:[{
          width:'200',
          label: '物料编码', // 表格header
          render:(createElement, params)=>{ // 动态渲染，click事件示例
            let _this = this;
            return createElement('div', {}, 
            [createElement('el-button', {
                props: {
                  type: 'text',
                },
                on: {
                  click() {
                   _this.openVendorInfo(params.row);
                  }
                }
              }, params.row.materialCode)
            ]);
          }
        },{
          label: '物料名称',
          key: 'materialName'
        },{
          label: '规格型号',
          key: 'specification'
        },{
          label: '描述',
          key: 'description'
        },{
          label: '是否有集采权限',
          key: 'cpFlag',
          render:(createElement, params)=>{ //动态渲染, 字典表示例
            return createElement(TableIcon,{props:{
                flag: params.row.cpFlag,
                titles: [{status:0,title:'否'},{status:1,title:'是'}]
            }});
          }
        },{
          label: '是否启用集采',
          key: 'cpActivateFlag',
          render:(createElement, params)=>{ //动态渲染, 字典表示例
            return createElement(TableIcon,{props:{
                flag: params.row.cpActivateFlag,
                titles: [{status:0,title:'否'},{status:1,title:'是'}]
            }});
          }
        },{
          label: '是否冻结',
          key: 'freezeFlag',
          render:(createElement, params)=>{ //动态渲染, 字典表示例
            return createElement(TableIcon,{props:{
                flag: params.row.freezeFlag,
                titles: [{status:0,title:'否'},{status:1,title:'是'}]
            }});
          }
        },{
          label: '是否免检',
          key: 'exemptionFlag',
          render:(createElement, params)=>{ //动态渲染, 字典表示例
            return createElement(TableIcon,{props:{
                flag: params.row.exemptionFlag,
                titles: [{status:0,title:'否'},{status:1,title:'是'}]
            }});
          }
        },{
          label: '备注',
          key: 'remarks'
        }]
      };
    },
    methods: {
      openVendorInfo(row){
        // 打开供应商信息弹框
        this.dialogFormVisible = true,
        this.form2 = row
        this.getVendorByMatId(row.id);
      },
      getVendorByMatId(materialId) {
        this.axios.post(this.lib.config.host.masterData + "/mdata/materialVendor/getVendorByMatId/" + materialId + '/' +  this.$route.query.factoryId, {})
          .then((response) => {
            this.tableData2 = response.data.rows;
            this.total2 = response.data.total;
          })
          .catch((error) => {
            console.log(error);
          });
      },
       pageSize2(arg){
        this.form2.pageSize = arg;
        this.query(this.form2);
      },
      pageNo2(arg){
        this.form2.pageNo = arg;
        this.query(this.form2);
      }
    }
  }
</script>
<style>

</style>